// // 轮播图接口
// let xhr=new XMLHttpRequest();
// let oBox=document.querySelector("#oImg");
// // let banner11=document.querySelector(".banner11");

// xhr.open("get","../../bannerGet.php",true);
// xhr.send();
// xhr.onreadystatechange=function(){
//   if(xhr.readyState==4&&xhr.status==200){
//     fun(xhr.responseText);
//     // console.log(responseText);
//   }
  
// }
// function fun(the) {
//   let json=JSON.parse(the);
//   console.log(json);
//   for(let index in json) {
//         //  console.log(text[index].img);
//           oBox[index].src=json[index].img;
//           // oBox.style.background=`url($index[0].img})`;
//           // oBox.style.backgroundSize="900px 300px"; 
//           setTimeout(()=>{
//             oBox[index].src=json[index/1+1].img;
//             clearTimeout()
//           },3000)
//           setTimeout(()=>{
//             oBox[index].src=json[index/1+2].img;
//             clearTimeout()
//           },6000)
//           setTimeout(()=>{
//             oBox[index].src=json[index/1+3].img;
//             clearTimeout()
//           },9000)
//           setTimeout(()=>{
//             oBox[index].src=json[index].img;
//             clearTimeout()
//           },12000)
//   }

//   // text=JSON.parse(text);
 
//   // // console.log();
  

// }



class Banner {
  // 1.凡是需要操作的dom元素都必须传进来
  // 2.可以设置自定义的属性
  constructor(box, next, prev, lis) {
    //index是核心属性，所的样式都是通过index的改变而改变

    this.oBox = box;
    this.oNext = next;
    this.oPrev = prev;
    this.oLis = lis;
    this.index = 0;
    this.oBox.style.backgroundImage = `url(../kuangwei/img/${this.index}.jpg)`;
   
    this.eventBind();
  }


  setBgcImg() {
    this.oBox.style.backgroundImage = `url(../kuangwei/img/${this.index}.jpg)`;
  }

  setBgcLi() {
    for (let i = 0; i < this.oLis.length; i++) {
      if (i == this.index) {
        this.oLis[i].style.color = "black";
        this.oLis[i].style.textDecoration = "overline";
      } else {
        this.oLis[i].style.color = "grey";
        this.oLis[i].style.textDecoration = "none";
      }
    }
  }

  next() {
    this.index++;

    if (this.index == this.oLis.length) {
      this.index = 0;
    }

    this.setBgcImg();
    this.setBgcLi();
  }

  prev() {
    this.index--;

    if (this.index == -1) {
      this.index = this.oLis.length - 1;
    }

    this.setBgcImg();
    this.setBgcLi();
  }

  mouseLi() {
    let that = this;
    for (let i = 0; i < this.oLis.length; i++) {
      this.oLis[i].onmouseover = function () {
        that.index = i;
        that.setBgcImg();
        that.setBgcLi();
      };
    }
  }

  auto() {
    let that = this;
    clearInterval(this.time);
    this.time = setInterval(function () {
      that.next();
      clearInterval(this.time);
    }, 2000);
  }
  clear() {
    clearInterval(this.time);
  }

  eventBind() {
    let that = this;
    this.oNext.onclick = function () {
      that.next();
    };
    this.oPrev.onclick = function () {
      that.prev();
    };

    this.oBox.onmouseout = function () {
      that.auto();
    };
    this.mouseLi();
    this.setBgcImg();
    this.setBgcLi();
  }
}

// 旁边的微信图标

let oPic = document.querySelector(".pic");
let time;

function startMove(obj, target) {
  clearInterval(time);
  time = setInterval(function () {
    // 缓冲运动原理
    let speed = (target - obj.offsetTop) / 10;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (target == obj.offsetTop) {
      clearInterval(time);
    } else {
      obj.style.top = obj.offsetTop + speed + "px";
    }
  }, 30);
}

//   onScroll -- 浏览器的滚动条位置发生变化时触发的事件

window.onscroll = function () {
  //   获取滚动条高度的兼容写法
  let sTop = document.documentElement.scrollTop || document.body.scrollTop;
  startMove(oPic, 100 + sTop);
};



